<template>
    <div>
        <p class="header">质量预警</p>
        <!-- 质量预警 -->
        <!-- 顶部查询 -->
        <el-form :model="queryForm" :inline="true" class="demo-form-inline">
            <el-form-item label="建设单位" style="margin-left: 10px; margin-right: 20px">
                <el-select v-model="queryForm.constructionCompany" placeholder="请选择建设单位">
                    <el-option v-for="item in unitSelect" :key="item" :value="item"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="固井日期">
                <el-date-picker v-model="queryForm.beginDate" type="date" placeholder="开始固井日期"> </el-date-picker>
                ~
                <el-date-picker v-model="queryForm.endDate" type="date" placeholder="结束固井日期"> </el-date-picker>
            </el-form-item>

            <el-button type="primary" style="margin-left: 10px" @click="Query">查询</el-button>
			<el-upload class="upload-demo" :http-request="importExcel" :show-file-list="false" action="">
				<el-button type="success" >导入</el-button>
			</el-upload>
			<el-button type="primary" @click="DownLoadModel">模板下载</el-button>
        </el-form>

        <!-- 以前表格 -->
        <el-table
            :data="tableData"
            border
            style="width: 910px; font-size: 10px"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="setCellColor"
        >
            <el-table-column prop="constructionCompany" label="建设单位" align="center"> </el-table-column>
            <el-table-column prop="wellName" label="井名" align="center"> </el-table-column>

            <el-table-column prop="passingPercent" label="合格率" align="center"> </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showWell(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="current"
            :page-size="pagesize"
            @current-change="pageChange"
        >
        </el-pagination>

        <!-- 查看具体井信息弹出框 -->
        <el-dialog :visible.sync="dialogVisible" width="80%" :before-close="handleClose" align="center">
            <div style="margin-bottom: 20px; margin-top: -30px">
                <span style="font-size: 20px; font-weight: 600">{{ dialogwellname }}井合格率：</span>
                <span style="font-size: 20px; font-weight: 600; color: rgb(178, 34, 34)">{{ dialognumber }}</span>
            </div>
            <el-table :data="dialogTableData" border style="font-size: 10px" :header-cell-style="{ textAlign: 'center' }">
                <el-table-column prop="constructioncompany" label="建设单位" align="center"> </el-table-column>
                <el-table-column prop="wellname" label="井名" align="center"> </el-table-column>
                <el-table-column prop="casename" label="套管名称" align="center"> </el-table-column>
                <el-table-column prop="casesize" label="套管尺寸(mm)" align="center"> </el-table-column>
                <el-table-column prop="returnheightdesign" label="水泥设计返高(m)" align="center"> </el-table-column>
                <el-table-column prop="returnheighttrue" label="水泥实际返高(m)" align="center"> </el-table-column>

                <el-table-column label="一界面固井质量解释结果统计" align="center">
                    <el-table-column prop="cementqualityresulthighquality1" label="优质率(%)" align="center"> </el-table-column>
                    <el-table-column prop="cementqualityresultqualified1" label="合格率(%)" align="center"> </el-table-column>
                </el-table-column>

                <el-table-column label="二界面固井质量解释结果统计" align="center">
                    <el-table-column prop="cementqualityresulthighquality2" label="优质率(%)" align="center"> </el-table-column>
                    <el-table-column prop="cementqualityresultqualified2" label="合格率(%)" align="center"> </el-table-column>
                </el-table-column>

                <el-table-column label="生产套管" align="center">
                    <el-table-column label="油气水层段及其以上25m" align="center">
                        <el-table-column prop="passoilinterface1" label="一界面是否合格" align="center"> </el-table-column>
                        <el-table-column prop="passoilinterface2" label="二界面是否合格" align="center"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="尾管重合段及其以上25m" align="center"
                        ><el-table-column prop="passtailinterface1" label="一界面是否合格" align="center"> </el-table-column>
                        <el-table-column prop="passtailinterface2" label="二界面是否合格" align="center"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="上层套管鞋处及其以上25m" align="center">
                        <el-table-column prop="passupbinterface1" label="一界面是否合格" align="center"> </el-table-column>
                        <el-table-column prop="passupbinterface2" label="二界面是否合格" align="center"> </el-table-column
                    ></el-table-column>
                    <el-table-column label="上层套管分级箍处及其以上25m" align="center"
                        ><el-table-column prop="passupminterface1" label="一界面是否合格" align="center"> </el-table-column>
                        <el-table-column prop="passupminterface2" label="二界面是否合格" align="center"> </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { GetSelect, Query, showWell } from '../../../api/module/cementingQuality/QualityWarning';
import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel.js'
export default {
    data() {
        return {
            //查询表格
            queryForm: {
                constructionCompany: '',
                beginDate: '',
                endDate: ''
            },
            //建设单位下拉选择框
            unitSelect: [],
            current: 1,
            pagesize: 10,
            total: 0,
            tableData: [], //
            dialogVisible: false, //查看具体弹出框控制
            dialogTableData: [], //
            dialogtitle: '详情',
            dialogwellname: '',
            dialognumber: '' //弹出框标题
        };
    },
    methods: {
		//excel导入数据
			importExcel(item) {
			    const formData = new FormData();
			    formData.append('file', item.file);
			    importExcel(formData, "CementQualityWarningExcelOperationStrategy") //传入导入表的名称
			        .then((res) => {
			            console.log('导入成功');
			             this.$message.success('导入数据成功！')
			            console.log(res);
			            this.showWell(); //查询该表
			        })
			        .catch(err=>{
			             console.log('导入失败');
			        console.log(err)
			    });
			},
		    //下载模板
		    DownLoadModel() {
		        //下载excel模板
		        downTemplateExcel('cementqualitywarning').then((res) => {
		            console.log(res);
		            if (!res) {
		                return;
		            }
		            const link = document.createElement('a');
		            let blob = new Blob([res]);
		            link.style.display = 'none';
		            link.href = URL.createObjectURL(blob);
		            link.setAttribute('download', '固井质量预警.xls');
		            document.body.appendChild(link);
		            link.click();
		            document.body.removeChild(link);
		        });
		    },
        //修改单元格颜色
        setCellColor({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 2) {
                return 'color:red';
            }
        },

        GetSelect() {
            GetSelect('项目建设单位')
                .then((res) => {
                    console.log(res);
                    this.unitSelect = res.data;
                })
                .catch((err) => {
                    console.log('建设单位下拉失败');
                });
        },

        Query() {
            Query(this.current, this.pagesize, this.queryForm).then((res) => {
                console.log('查询成功', res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.$message({
                    message: '查询成功',
                    type: 'success'
                });
            });
        },

        //查看该井的所有数据
        showWell(row) {
            showWell(row.wellName).then((res) => {
                console.log('查看成功', res);
                this.dialogVisible = true;
                this.dialogTableData = res.data;
                this.dialogwellname = row.wellName;
                this.dialognumber = row.passingPercent;
            });
        },
        //点击分页
        pageChange(currentpage) {
           
            Query(currentpage, this.pagesize, this.queryForm).then((res) => {              
                this.tableData = res.data.records;
                this.total = res.data.total;
            }).catch(err=>{
                console.log("分页失败")
            });
        }
    },
    mounted() {
        this.GetSelect();
        this.Query();
    }
};
</script>

<style scoped="scoped">

.header {
   
    color:black;
    margin-bottom: 10px;
    text-align:left;
    font-size: 17px;
    background-color: #eef0f6;
    font-weight: 400;
    letter-spacing: 0px;
    height: 27px;
    padding: 5px 10px;
}
.upload-demo {
       display: inline-block;
       width: 68px;
       height: 100%;
       margin-left: 0px;
}
/* .el-upload {
    display:none; 
    text-align:inherit; 
    cursor:default; 
    outline: 0;
} */
.upload-demo >>> .el-upload--text{
    background-color: #fff;
    border: 0px dashed #d9d9d9;
    border-radius: 6px;
    /* -webkit-box-sizing: border-box; */
    box-sizing: border-box;
    width: 100%;
    height: 100%; 
    text-align: center;
    cursor: pointer; 
    position: initial;
    overflow: initial; 
}
</style>
